<template>
  <div class="container">
    <div class="topTips">
      <span class="left"> 用户中心&gt;注销列表&gt;详情页面 </span>
      <el-button type="primary" @click="$router.back()">返回</el-button>
    </div>
    <div class="frist">
      <div class="title">注册资料 <span class="logoutTime" style="float:right;margin-right:15px;color:#f00"> 注销时间： {{ $route.query.logoutTime|| '暂无' }}</span> </div>
      <div class="content">
        <ul>
          <li><b> 用户ID：</b>{{ userInfo.id }}</li>
          <li><b>手机号：</b>{{ userInfo.username||'暂无' }}</li>
          <li><b> 呢称：</b>{{ userInfo.mobileLocation || '暂无' }}</li>
          <li>
            <b> 用户身份 </b> {{ ['普通用户','经纪人','城市合伙人','品牌合伙人'][userInfo.roleType]||'暂无' }}
          </li>
          <b />
        </ul>
        <ul>
          <li><b> 推荐人手机号:</b>{{ userInfo.inviterMobile||'暂无' }}</li>
          <!-- <li><b> 推荐人姓名：</b>{{ userInfo.inviterName || '暂无' }}</li> -->
          <li><b> 注册时间:</b>{{ userInfo.createTime }}</li>
          <li>
            <b> 注册地址：</b>{{ userInfo.registerCity || '暂无' }}
          </li>
          <li><b>邀请人数:</b> {{ userInfo.bankCardNo || '暂无' }}</li>
        </ul>
      </div>
      <b />
    </div>
    <div class="third">
      <div class="title">实名认证</div>
      <div class="content">
        <!-- <ul>
          <li><b>姓名</b>&nbsp;&nbsp;{{ erbrokerData.realName }}</li>
          <li><b>身份证</b>&nbsp;&nbsp;{{ erbrokerData.idCardNo }}</li>
          <li><b>证件有效期</b>&nbsp;&nbsp;{{ erbrokerData.idCardStartExpireDate }}-{{ erbrokerData.idCardEndExpireDate }}</li>
        </ul> -->
        <ul>
          <div class="item">
            <div class="img">
              <el-image
                v-if="erbrokerData.idCardFront"
                class="clickImg"
                style="width:190px;height:120px;"
                :src="erbrokerData.idCardFront"
                :preview-src-list="[erbrokerData.idCardFront]"
              />
            </div>

            <p>身份证正面</p>
          </div>
          <div class="item">
            <div class="img">
              <el-image
                v-if="erbrokerData.idCardSide"
                class="clickImg"
                style="width:190px;height:120px;"
                :src="erbrokerData.idCardSide"
                :preview-src-list="[erbrokerData.idCardSide]"
              />
            </div>
            <p>身份证反面</p>
          </div>
        </ul>
      </div>
    </div>
    <div class="mytable">
      <div class="title">
        <span>基础估价</span>
        <!-- <span class="more" @click="toMore"><span id="total">共计{{ total }}条</span> 更多</span> -->
      </div>
      <el-table
        ref="table"
        :key="tableKey"
        v-loading="loading"
        :data="list"
        border
        fit
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          prop="username"
          :show-overflow-tooltip="true"
          align="center"
          type="index"
          min-width="120px"
        />
        <el-table-column
          label="报告ID"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="报告时间"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="品牌车型"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.modelName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="市场车型"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.salesdesc }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="上牌时间"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.regdate }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="行驶里程(万公里)"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.miles }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="所在城市"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.city }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="基础估价(万元)"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="估价评分"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="mytable">
      <div class="title">
        <span>卖车列表</span>
        <!-- <span class="more" @click="toMore"><span id="total">共计{{ total }}条</span> 更多</span> -->
      </div>
      <el-table
        ref="table"
        :key="tableKey"
        v-loading="loading"
        :data="list"
        border
        fit
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          prop="username"
          :show-overflow-tooltip="true"
          align="center"
          type="index"
          min-width="120px"
        />
        <el-table-column
          label="车辆ID"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="品牌车型"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="市场车型"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.modelName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="上牌时间"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.salesdesc }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="行驶里程（万公里）"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.regdate }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="所在城市"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.city }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="基础估价(万元)"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="上架价格(万元)"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="上架时间"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="上架状态"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.operation')"
          align="center"
          min-width="150px"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row }">
            <el-link
              class="el-icon-view"
              @click="view(row)"
            >
              查看详情
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="mytable">
      <div class="title">
        <span>买车列表</span>
        <!-- <span class="more" @click="toMore"><span id="total">共计{{ total }}条</span> 更多</span> -->
      </div>
      <el-table
        ref="table"
        :key="tableKey"
        v-loading="loading"
        :data="list"
        border
        fit
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          prop="username"
          :show-overflow-tooltip="true"
          align="center"
          type="index"
          min-width="120px"
        />
        <el-table-column
          label="车辆ID"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="品牌车型"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="市场车型"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.modelName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="上牌时间"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.salesdesc }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="行驶里程（万公里）"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.regdate }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="所在城市"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.city }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="基础估价(万元)"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="上架价格(万元)"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="上架时间"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="上架状态"
          :show-overflow-tooltip="true"
          align="center"
          min-width="150px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.operation')"
          align="center"
          min-width="150px"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row }">
            <el-link
              class="el-icon-view"
              @click="view(row)"
            >
              查看详情
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['0'],
      statisticsInviteInfo: {},
      loading: false,
      list: [],
      total: 0,
      userInfo: {},
      tableKey: '1',
      erbrokerData: { state: 1 },
      fit: 1
    }
  },
  created() {
    if (this.$route.query.roleType === '3') {
      this.$get(`/web/partnerBrand/get/detail?userId=${this.$route.query.id}`).then((res) => {
        if (res.data.code === '0') {
          this.erbrokerData = res.data.data
        }
      })
    }
    if (this.$route.query.roleType === '1') {
      this.$get(`/web/broker/get/brokerAuthInfo?userId=${this.$route.query.id}`).then((res) => {
      // console.log(res)
        if (res.data.code === '0') {
          this.erbrokerData = res.data.data
        }
      })
    }
    if (this.$route.query.roleType === '2') {
      this.$get(`/web/partnerCity/get/detail?userId=${this.$route.query.id}`).then((res) => {
      // console.log(res)
        if (res.data.code === '0') {
          this.erbrokerData = res.data.data
        }
      })
    }

    this.$get(`/web/userOut/get?userId=${this.$route.query.id}`).then(res => {
      if (res.data.code === '0') {
        this.userInfo = res.data.data
      }
    })
    console.log(this.$route.query.invite)
    if (Number(this.$route.query.invite) !== 0) {
      this.$get(`/web/user/get/statisticsInvite?userId=${this.$route.query.id}`).then((res) => {
        if (res.data.code === '0') {
          this.statisticsInviteInfo = res.data.data
        }
      })
    }
  },
  methods: {
    toMore() {
      this.$router.push({
        path: '/valuation/index',
        query: {
          userNameOrMobile: this.userInfo.mobile
        }
      })
    },
    toChecked() {
      this.$router.push({
        name: 'check',
        query: {
          id: this.$route.query.id,
          status: this.erbrokerData.operateExamineState
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-image{
  overflow: inherit;
}
.el-collapse-item {
  position: relative;
  .right-info {
    position: absolute;
    right: 40px;
    top: 0px;
  }
}
/deep/ .el-collapse-item__header {
  padding-left: 40px;
}
.realContent {
  padding-left: 40px;
}
.topTips {
  height: 50px;
  line-height: 50px;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  border-bottom: 1px solid #ccc;
}
ul li {
  list-style: none;
}
.container {
  background: #fff;
  border: 1px solid #dfe6ec;
  margin: 20px;
  margin-bottom: 100px;
  /* padding-left: 20px; */
}

.container .title {
  font-size: 20px;
  font-weight: bold;
  /* margin-left: 20px; */
  text-indent: 2rem;
  padding: 10px 0;
  border-bottom: 1px solid #dfe6ec;
}

.container .content {
  border-bottom: 1px solid #dfe6ec;
  position: relative;
}

.container .content ul {
  display: flex;
  text-indent: 2rem;
  padding: 10px 0;
}

.container .content ul li {
  width: 400px;
}
.container .content .item p {
  font-size: 15px;
  text-align: center;
  width: 238px;
}

.container .content .img {
  width: 150px;
  height: 120px;
  /* background: #ccc; */
  margin-right: 20px;
}

.container .content .img img {
  width: 100%;
  height: 100%;
}

// .container .content .item p {
//   font-size: 15px;
//   text-align: center;
//   width: 181px;
// }

.content .QrcodeImg {
  width: 80px;
  height: 80px;
  margin: 8px auto;
  border: 1px solid #ccc;
}

.content .QrcodeImg img {
  width: 100%;
  height: 100%;
}

.content .inviteQrcode {
  text-align: center;
  width: 200px;
  height: 114px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.mytable .title {
  font-size: 20px;
  font-weight: bolder;
  display: flex;
  justify-content: space-between;
}
.mytable .title .more {
  font-size: 15px;
  font-weight: normal;
  color: #ccc;
  margin-right: 20px;
  cursor: pointer;
}
.mytable .title #total {
  color: #000;
  margin-left: 20px;
}
.realTitle{
  // border-bottom: 1px solid #ccc;
  font-weight: 600;
}
</style>
